react native 路由
初次学习react native ,真的是一步一个坑，简单说说路由吧，希望看到到小伙伴们不要踩，网上到不太适合新版本的。推荐使用 yarn。yarn add react-navigationyarn add react-native-reanimated react-native-gesture-handler [email protected]^1.0.0-alpha.23...
2024-01-10
react native 之上传文件
最近遇到react native中需要上传一些图片到后台.期间,找了一些第三方上传插件,感觉不太好用,要么只支持一个平台,要么会对其他第三方造成影响,实在无奈.只能直接使用fetch上传.其中上传文件只需要图片的绝对路径即可,可能RN底层会帮我们把图片转为流传输 /* * * 上传图片请求 * @param ...
2024-01-10
react native布局
像素无关react native中的尺寸是没有单位的，它代表了设备的独立像素flex box的弹性盒子布局和css3中有何不同？flexDiDirection在react native中的默认值是column，也就是默认是列排列；在web中默认值是row行排列alignItems：在react native中默认是stretch，在web中默认的是flex-startflex:在web中是可以接受三个参...
2024-01-10
react-native 浅尝之
此图确实描述了我学习过程的抓狂！ 经过反复的尝试和对错误log的解读、搜索和解决处理，最终成功编译出了第一个Hybrid-App。效果这样的： 当然这里我不是在讲解或者去描述它的编译过程。因为这些在官网或者网络上是很多的，不妨看看这些该博文内容基于Windows系统，针对Android系统下的APP-参考：...
2024-01-10
react native 获取地理位置
此版本是0.47react native 官网介绍了这个 api Geolocation 但是这个api只能返回 经纬度 所以要把经纬度 通过逆地理位置转义 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通过这个阿里的开放接口RN 0.55以下版本需要导入 不包括0.55import Geolocation from 'Geolocation';0.55 以及0.55以上 Android 上获取可能存在问题 官网介...
2024-01-10
react native 学习笔记13
1.今天学习定义页面，效果如下：定义的页面最上面一个没有顶上去，还需要修改页面修改searchbar：marginTop：Platfrom.OS==='ios'?20:0 说明：Ios上边为20，而android=0；2.建搜索框3.学习滚动页面上面的广告3个页面，小而且，不好看，一般用户就看一个大的广告，所以还需要修改界面需要让广告动起来...
2024-01-10
react native 学习资料整理
入门教程深入浅出 React Native：使用 JavaScript 构建原生应用 http://www.appcoda.com/react-native-introduction/ 中文版 http://www.cocoachina.com/ios/20150408/11513.html react 做的一款打分app 入门教程http://www.oschina.net/translate/going-native-with-reactreact-native 之布局篇 https://...
2024-01-10
react-native 真机调试
原文地址:https://dsx2016.com/?p=380➢ 运行程序手机USB连接电脑在根目录下react-native run-android程序会自动安装在连接的真机上➢ 安装程序打开USB调试模式,确认是文件传输,不是充电状态选择继续安装➢ 初始界面react-native的初始界面,能看到就说明程序运行成功➢ 摇一摇手机摇一摇,开启调试菜单...
2024-01-10
react-native 中样式的骚写法
今天在读人家源码时发现了一个rn样式的骚写法：import { StyleSheet, Platform,} from 'react-native';const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#eee', ...Platform.select({ ios: { ...
2024-01-10
react native 之 获取键盘高度
多说不如多撸:/** * Created by shaotingzhou on 2017/2/23. *//** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Keyboard, TextI...
2024-01-10
一个标准的 react-native 组件
前言：react-native开发的app，虽然说是兼容 android 和 ios 两端；但其框架本身的设计思想有很多还是和前端类似的（毕竟是 react 的衍生产物）；其开发模式主要还是组件化！今天，来总结一下，一个 react-native 标准的组件包括哪些元素：标准的组件完整代码：import React, {Component} from "react";import { Style...
2024-01-10
react native 混合开发代码示例
ReactNativeModuleProjectreact native project for hybrrd app，自己做的一个混合开发研究，个人觉得相对于其他混合开发框架来说，有很大优势，不用学习复杂的js语法， 并且对更接近原生，能够保证运行更加流畅和风格统一，同时它的语法和控件也更加容易理解，上手较快。也可以和原生应用混合开发，互相调...
2024-01-10
react-native 打开设置界面
iOSiOS打开设置还是比较简单的，使用Linking组件即可：Linking.openURL('app-settings:') .catch(err => console.log('error', err))Android1、在android/app/src/main/java/com/<projectname>/文件夹下创建opensettings文件夹2、在这个文件夹下创建模块文件OpenSettingsModule.java（模块功能）和包文件OpenSettingsPackage.java（注册...
2024-01-10
react-native 列式布局 行式布局
/** * Create by bamboo on 2018-04-13 * 页面布局 */import React, { Component } from 'react';import { StyleSheet, Text, View,} from 'react-native';export de...
2024-01-10
react-native项目之样式总结
react native（以下简称rn）里面涉及到的样式规则都是在js文件中写的，一改pc端的在样式文件中定义规则，所以pc端开发习惯的童鞋转向开发rn项目时，可能会对样式感到有些奇怪；其实react在地面实现时会转化对应的样式。 rn中的css样式是css中的一个子集，对css的一些规程进行了阉割，此外还扩...
2024-01-10
React-native项目构建中的坑
2019独角兽企业重金招聘Python工程师标准>>> 从12月24日开始搭建React-native项目，期间构建项目 一直报错，Build failed with an execption，顺便帮贴一下收益良多的帖子 ，有需要的同学可以查看。好了 进入重点----------------------来一条华丽的分割线-------------------------------当项目一切都OK 进入到 react-native run-a...
2024-01-10
react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值.父组件传递给子组件:父组件: 在主组件里面,使用通过写一个子组件的属性,直接把值或者navigator传给子组件即可.如下20行: 1 /** 2 * Sample R...
2024-01-10
React中使用Ant Table组件
一、Ant Design of React http://ant.design/docs/react/introduce二、建立webpack工程 webpack+react demo下载 项目的启动，参考三、简单配置 1.工程下载下来之后，在src目录下新建目录“table”，新建app.js，内容如下。import React from 'react';import ReactDOM from 'react-dom';import ExampleTable from './Example...
2024-01-10如何在react-native中缩小WebView？
我在react-native中使用“ WebView”来呈现网页。该网页没有适合移动设备的用户界面。当我在Chrome浏览器中打开它时，如下图所示。 但是，当我渲染下面的代码时，它看起来像下面的图像。请参阅我已经尝试了不同的道具automaticallyAdjustContentInsets ={false}，scalesPageToFit={false}。但这并没有给我欲望输出。ren...
2024-01-10
react native 加载图片方式加在app端的填坑之路
在iOS文件夹下，一定要在xcode中添加才会加载出来图片，记得图片一定要定义高度页面代码：import React, { Component } from 'react';import { StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';//import Icon from 'react-native-vector-icons/FontAwesome';import Icon from 'react-native-v...
2024-01-10
图解React SSR中的hydrate
React CSR：水车模型当初在理解 React CSR 时做过一个比喻，把单向数据流比作瀑布模型：瀑布模型：由props（水管）和state（水源）把组件组织起来，组件间数据流向类似于瀑布。数据流向总是从祖先到子孙（从根到叶子），不会逆流（摘自深入 React）单组件的微观视角下，我们把props理解为水管（数...
2024-01-10
react-native 学习之TextInput组件篇
1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 */ 5 'use strict'; 6 import React, { 7 AppRegistry, 8 Component, 9 StyleSheet, 10 Text, 11 View, 12 Image, 13 TextInput 14 } from 'react-native'; 15...
2024-01-10
react中tab选项卡切换
直接上代码 不用的组件可以删了import React from 'react';import { NavLink} from "react-router-dom";import Otherbanner from '../otherbanner/index.js';import Header from '../../header/index.js';import Footer from '../../footer/index.js';class Index extends React.Componen...
2024-01-10
react.js - react中路由参数的获取时机
路由参数是作为props传入组件的，它像普通属性一样，在路由组件创建或重新渲染时传入组件。至于那个周期获取，看实际情况。要用作异步请求可在componentDidmount获取，要渲染出来可在render中获取，要在渲染前做检测可在render之前的生命周期里获取。...
2024-01-10
vue&Angular&React的优缺点 - H海涛
一、Vue.js： 其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。 Vue.js的特性如下： 1.轻量级的框架 2.双向数据绑定 3.指令 4.插件化 ...
2024-01-10
